<template>
  <a-modal
    :title="'查看详情'"
    :visible="true"
    width="60%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card>
        <a-row
          type="flex"
          justify="start"
          align="top"
        >
          <a-col :span="24">
            <a-form
              :form="form"
              :labelCol="formItemLayout.labelCol"
              :wrapperCol="formItemLayout.wrapperCol"
            >
              <a-form-item label="标签主题">
                {{detailList.name}}
              </a-form-item>
              <a-form-item label="查询数据源">
                <div
                  v-for="(item,index) in menuType"
                  :key="index"
                >
                  <span v-if="item.id == detailList.datasourceId">
                    {{ item.name }}
                  </span>
                </div>
              </a-form-item>
              <a-form-item label="标签类型">
                <div
                  v-for="(item,index) in labelType"
                  :key="index"
                >
                  <span v-if="item.id == detailList.type">
                    {{ item.name }}
                  </span>
                </div>
              </a-form-item>
              <a-form-item label="标签描述">
                {{detailList.describe}}
              </a-form-item>
              <a-form-item label="查询SQL语句" v-if="detailList.type == 1">
                {{detailList.sqlStatement}}
              </a-form-item>
              <a-form-item label="字段标签栏">
                <span
                  v-for="(item,index) in detailList.placeholderDetailList"
                  :key="index"
                >
                  <a-tag color="blue">
                    {{item.fieldName}}
                  </a-tag>
                </span>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
    </div>

  </a-modal>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
const labelType = [
  {
    id: 1,
    name: '模板消息标签'
  },
   {
    id: 2,
    name: '手动创建模板标签'
  }
]
export default {
  props: {
    detail: {
      type: Object,
      default: null
    },
    appid: {
      type: String,
      default: null
    }
  },

  data() {
    return {
      urlKey: 'basemgt-wx',
      labelType,
      menuType: [],
      fieldList: [],
      detailList: [],
      id: '',
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xl: { span: 14 },
          xs: { span: 14 },
          sm: { span: 14 }
        }
      },
      form: this.$form.createForm(this),
    }
  },

  created() {
    const { detail } = this.$props
    this.id = detail.id
  },
  watch: {
    appid() {
      this.getMenuList()
      this.getDetailList()
    }
  },
  mounted() {
    this.getMenuList()
    this.getDetailList()
  },
  methods: {
    reset() {
      this.$emit('closeDetail')
    },
    getDetailList() {
      const params = {
        id: this.id
      }
      getAction(`${this.urlKey}/WxPlaceHolder/findWxPlaceHolderDetailById`, params).then(data => {
        if (data.code == 200) {
          this.detailList = data.data
        } else {
          this.$message.warning(data.msg || data.message)
        }
      })
    },
    getMenuList() {
      const params = {}
      getAction(`${this.urlKey}/WxPlaceHolder/findDataSourceInfo`, params).then(data => {
        if (data.code == 200) {
          this.menuType = data.data
        } else {
          this.$message.warning(data.msg || data.message)
        }
      })
    },
  }
}
</script>

